<template>
  <div class="addressInfo">
    <div class="divHead">
      <div class="divTitle">
        <ArrowLeft @click="router.back()" style="width: 5vw; height: 5vh;" />
        <span>地址管理</span>
      </div>
    </div>

    <div class="divContent">
      <div class="contentItem" v-for="item in addressArr" :key="item.id">
        <div class="title">
          <el-tag class="mx-1">{{ item.label }}</el-tag>
          <div class="detail">{{ item.detail }}</div>
        </div>

        <div class="user">
          <div class="name">{{ item.consignee }}</div>
          <div class="sex">{{ item.sex == 1 ? '先生' : '女士' }}</div>
          <div class="phone">{{ item.phone }}</div>
        </div>

        <el-divider style="margin: 10px 0px;" />

        <div class="default">
          <el-radio-group v-model="item.isDefault" @change="isDefaultChange(item)">
            <el-radio :label="1">设为默认地址</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <div class="divBottom" @click="router.push({ path: '/saveAddress' })">+ 添加收货地址</div>
  </div>
</template>

<script setup lang="ts" name="addressInfo">
import { ref, onMounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { getAddressList, putIsDefault } from '@/api/index'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Iaddress } from './interface/index'
const router = useRouter()

const addressArr = ref<Iaddress[]>()

onMounted(() => {
  getAddressData()
})

const getAddressData = async () => {
  try {
    const res = await getAddressList<Iaddress[]>()
    addressArr.value = res.data
  } catch (error) {
    ElMessage.error(error as string)
  }
}

const isDefaultChange = async (item: Iaddress) => {
  addressArr.value?.forEach(item => item.isDefault = 0)

  item.isDefault = 1

  try {
    const res = await putIsDefault(item)
    ElMessage.success('操作成功')
  } catch (error) {
    ElMessage.error(error as string)
  }
}
</script>

<style scoped lang="scss">
.addressInfo {
  width: 100%;
  height: 100vh;
  background-color: #f3f2f7;

  .divHead {
    width: 100%;
    height: 15%;
    opacity: 1;
    background: #333333;
    box-sizing: border-box;
    padding-left: 3vw;
    padding-right: 3vw;

    .divTitle {
      // height: 50%;
      padding-top: 10%;
      display: flex;
      align-items: center;
      text-align: center;
      font-size: 23px;
      color: #fff;

      span {
        flex: 1;
      }
    }
  }

  .divContent {
    width: 100%;
    height: 75%;
    // padding-bottom: 100px;
    // background: red;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 20px;


    .contentItem {
      box-sizing: border-box;
      width: 96%;
      background: #fff;
      margin-left: 50%;
      transform: translate(-50%);
      margin-top: 15px;
      overflow: auto;
      padding: 20px;

      .title {
        display: flex;

        .detail {
          margin-left: 10px;
        }
      }

      .user {
        display: flex;
        align-items: center;
        margin: 10px 0px;
        color: darkgray;
        div {
          margin-right: 10px;
        }
      }
    }
  }

  .divBottom {
    width: 85%;
    height: 6%;
    background-color: #ffc200;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-left: 50%;
    transform: translate(-50%);
    position: fixed;
    // bottom: 0px;
  }
}
</style>